<template>
<view class="report-box" @touchmove.stop.prevent="moveHandle">
		<view class="report-disalog">
			<view class="disalog-title">
				<view class="title">消息</view>
				<image class="close-icon" src="/static/image/close_blue_icon.png" mode="aspectFit" @click="close"></image>
			</view>
			<view class="disalog-content">
				<Message :Taskid="Taskid" :ispage="false"></Message>
			</view>
		</view>
	</view>
</template>

<script>
	import Message from '@/pages/mask/component/message/message';
	export default {
		props:{
			Taskid:{ // 任务id
				type:String,
				default:''
			},
		},
		components:{
			Message
		},
		data() {
			return {
				
			}
		},
		methods: {
			/**
			 * 点击关闭触发事件
			 */
			close:function(){
				this.$emit('close');
			},
			moveHandle(){
				return
			},
		}
	}
</script>

<style lang="scss" scoped>
.report-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		background: rgba(20, 20, 20, 0.5);
	}

	.report-disalog {
		background-color: white;
		border-radius: 10rpx;
		margin: 0 auto;
		position: fixed;
		top:20%;
		animation-name: disalogshow;
		animation-duration: 0.5s;
		width:100%;
		height:60vh;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;

		.disalog-title {
			position: relative;
			text-align: center;
			.close-icon{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.disalog-content {
			overflow: hidden;
			
			
		}
	}

	@keyframes disalogshow {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>
